<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="web">
			<div class="load" id="loadhide">
				<img src="img/load-bg.png">
				<div class="load-man load-posi">
					<img src="img/load-man.png">
				</div>
				<div class="load-rocket load-posi">
					<img src="img/load-rocket.png">
				</div>
				<div class="load-ball load-posi">
					<img src="img/load-ball.png">
				</div>
				<div class="load-text load-posi">
					<img src="img/load-text.png">
				</div>
				<div class="load-txt load-posi" id="percentage">
					<a>Loading</a>
					<span></span>
				</div>
			</div>
			<div class="begin" id="beginright">
					<div class="light lg1"></div>
					<div class="light lg2"></div>
					<div class="light lg3"></div>
					<div class="light lg4"></div>
					<div class="light lg5"></div>
					<div class="light lg6"></div>
			<div class="begin-logo">
				<img src="img/begin-icon.png">
			</div>	
			<div class="begin-title" style="transform: scale(1) translateZ(0px);">
				<img src="img/begin-title.png">
			</div>
			<div class="begin-mouth">
				<img src="img/begin-mouth.png">
			</div>
			<div class="begin-mouth2">
				<img src="img/begin-mouth2.png">
			</div>
			<div class="begin-mans">
				<img src="img/begin-listen.png">
				<img src="img/begin-mask2.png">
				<img src="img/begin-men.png">
				<img src="img/begin-mask.png">
				<img src="img/begin-mask.png">
				<img src="img/begin-mask.png">
				<img src="img/begin-mask.png">
			</div>
			<div class="begin-begin" id="beginbtn">
				<img src="img/begin-begin.png">
			</div>
				
			
			</div>
			<div class="anima" id="animation">
				<div style="display: none;">
					<progress id="progress" max="60" value="60"></progress>
				</div>
				<div id="pagebox">
					<div class="page" data-page="1" style="display: block; ">
						<div class="round round1"></div>
						<div class="round round2"></div>
						<div class="round round3"></div>
						<div class="round round4"></div>
						<div class="round round5"></div>
						<audio class="audio" style="visibility: hidden;" src=""  autoplay="autoplay" loop="loop"></audio>
						<div class="page-img">
							<div class="text">
								<img src="img/movieHitSong.png">
							</div>
							<div class="manwomen">
								<img src="img/movieHitSongpeople.png">
							</div>
							<div class="wall">
								<img src="img/movieHitSongCityWall.png">
							</div>
						</div>
						
						
						
					</div>
					<div class="page" data-page="2" style="display: block; ">
						<div class="light lg1"></div>
						<div class="light lg2"></div>
						<div class="light lg3"></div>
						<div class="light lg4"></div>
						<div class="light lg5"></div>
						<div class="light lg6"></div>	
						<div class="disk" data-page="2">
							<audio class="audio" style="visibility: hidden;"></audio>
							<div class="lightTop">
								<img src="img/lightearth.png">
							</div>
							<div class="middle">
							<div class="cheer-left">
								<img src="img/wow.png" class="wow-left">
								<img src="img/audienceLeft.png" class="people-left">
							</div>
							<div class="cheer-right">
								<img src="img/audienceRight.png" class="people-right">
								<img src="img/wow2.png" class="wow-right">
							</div>
							<div class="singer">
								<img class="stage" src="img/stage.png">
								<img class="songer" src="img/songer.png">
							</div>
							</div>
						</div>
					</div>
					<div class="page" data-page="3" style="display: block;">
						<div class="circle circle1 tmps"></div>
						<div class="circle circle2 tmps"></div>
						<div class="circle circle3 tmps"></div>
						<div class="circle circle4 tmps"></div>
						<div class="circle circle5 tmps"></div>
						<div class="disk" data-page="3">
							<audio class="audio" src="" style="visibility: hidden;"></audio>
							<div class="lightTop">
								<img src="img/lightearth.png">
							</div>
							<div class="bat-wall">
								<img src="img/WCwalls.png"/>
							</div>
							<div class="people-mam">
								<img src="img/watchpeos.png">
							</div>
							<div class="zheban">
								<img src="img/sangBan1.png">
								<img src="img/sangBan2.png">
							</div>
							<div class="soap-bar">
								<img src="img/feiZhao.png" class="soap">
								<img src="img/jianfeizaode.png" class="soap-people">
							</div>
							
						</div>
					</div>
					<div class="page" data-page="4" style="display: block;">
						<div class="circle circle1"></div>
						<div class="circle circle2"></div>
						<div class="circle circle3"></div>
						<div class="circle circle4"></div>
						<div class="circle circle5"></div>
						<div class="disk" data-page="4">
							<audio class="audio" src="" style="visibility: hidden;"></audio>
							<div class="lightTop">
								<img src="img/lightearth.png">
							</div>
							<div class="want">
								<img src="img/threeYao.png">
							</div>
							<div class="car">
								<img src="img/car.png">
							</div>
							<div class="flower">
								<img src="img/hua.png">
							</div>
						</div>
						
						
					</div>
					<div class="page" data-page="5" style="display: block;">
						<div class="circle circle1"></div>
						<div class="circle circle2"></div>
						<div class="circle circle3"></div>
						<div class="circle circle4"></div>
						<div class="circle circle5"></div>
						<div class="disk" data-page="5">
							<audio class="audio" src="" style="visibility: hidden;"></audio>
							<div class="lightTop rightto">
								<img src="img/lightearth.png">
							</div>
							<div class="flower-left">
								<img src="img/juhualeft.png">
							</div>
							<div class="flower-right">
								<img src="img/juhuaright.png">
							</div>
							<div class="oldman">
								<img src="img/oldman.png">
							</div>
							
							
						</div>
					</div>
					<div class="page page-bg" data-page="6">
						<div class="disk" data-page="6">
							<audio class="audio" src="" style="visibility: hidden;"></audio>
							<div class="courage">
								<img src="img/wogeiyou.png">
							</div>
							<div class="women">
								<img src="img/wuman.png">
							</div>
							<div class="man">
								<img src="img/man.png">
							</div>
							
							
						</div>
					</div>
				</div>
				<div class="itembox">
					<div class="item selectA" data-answer></div>
					<div class="item selectB" data-answer></div>
					<div class="item selectC" data-answer></div>
					<div class="next">
						<div class="smallMouth" id="time">60s</div>
					</div>
					
					
				</div>
				<div class="AudioBox" style="display: none; visibility: hidden;" ></div>
				<div class="tips">请先听两秒</div>
				
				
			</div>
			<div class="end" id="flash">
				<div class="end-top">
					<div class="user">
						<div class="touxiang">
							<img src="img/touxinag.png">
						</div>
						<span class="user-name">咸猪手</span>
					</div>
					<div class="logo">
						<img src="img/begin-icon.png">
					</div>
				</div>
				<div class="jiangpai">
					<img src="img/huangjing.png">
				</div>
				<div class="guess">
					<div class="guess-bg">
						<img src="img/info.png">
					</div>
					<span class="guess-text"></span>
				</div>
				<div class="boast-text">
					失敬失敬！十二星座黄金"音"斗士，你是哪一宫？向你的基友们寄送挑战书吧！
				</div>
				<div class="buttons">
					<a class="again">再次挑战</a>
					<a class="share" id="friend">分享朋友圈</a>
				</div>
				<div class="record">
					<img src="img/paiming_title.png">
				</div>
				<div class="list">
					<ul>
						<li></li>
						<li></li>
					</ul>
				</div>
				
			</div>
			<div class="ydShare" style="display: none;">
				<img src="img/yd.png">
			</div>
			
		</div>
		
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/preloadjs.min.js"></script>
		<script src="js/index.js"></script>
		<script>
    
        
		document.body.style.height = window.innerHeight + "px";
		
        /*动态改变根元素字体大小*/
        function recalc() {
        	//
            var clientWidth = document.documentElement.clientWidth;
            if(!clientWidth) return;
            document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
                                        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
        }

        function initRecalc() {
            recalc();
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if(!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();
    </script>
	</body>
</html>
